<template>
  <GridPage title="招聘职位信息审核" size="large">
    <n-card class="mt-12" title="待审核职位信息">
      <n-data-table
        :bordered="false"
        :columns="unauditedColumns"
        :data="unauditedJobPosting"
        :pagination="pagination"
      />
    </n-card>
    <n-card class="mt-12" title="审核通过职位信息列表">
      <n-data-table
        :bordered="false"
        :columns="auditedColumns"
        :data="auditedJobPosting"
        :pagination="pagination"
      />
    </n-card>
  </GridPage>

  <MeModal
    ref="modalRef"
    title="招聘职位信息详情"
    width="800px"
    :showCancel="false"
    :showOk="false"
  >
    <n-scrollbar style="max-height: 500px">
      <n-card embedded>
        <n-h1>{{ display.title }}</n-h1>
        <div>
          <n-text class="mr-10">{{ address }}</n-text>
          |
          <n-text class="mr-10 ml-10">{{ education_requirement }}</n-text>
          |
          <n-text class="ml-10">{{ type }}</n-text>
        </div>
      </n-card>
      <n-card class="mt-12" embedded>
        <n-h4>招聘详情</n-h4>
        <div>公司名称：{{ display.company_name }}</div>
        <div class="mt-5">职位类型：{{ job_name }}</div>
        <div class="mt-5">月薪范围：{{ display.salary_min }} - {{ display.salary_max }}k</div>
      </n-card>
      <n-card class="mt-12" embedded>
        <n-h4>职位描述</n-h4>
        <p v-for="descs in descriptions">{{ descs }}</p>
      </n-card>
    </n-scrollbar>
  </MeModal>
</template>

<script setup>
import { NTag, NButton } from 'naive-ui'
import { MeModal, GridPage } from '@/components'
import adminApi from '@/api/admin'
import { useModal } from '@/composables'
import { getCity, getJobName } from '@/data'

//未审核表格列数据
const unauditedColumns = ref([
  {
    title: 'id',
    key: 'job_id',
    align: 'center',
    width: '100px'
  },
  {
    title: '申请人员id',
    key: 'recruiter_id',
    align: 'center',
    width: '100px',
  },
  {
    title: '申请公司id',
    key: 'company_id',
    align: 'center',
    width: '100px',
  },
  {
    title: '申请公司名称',
    key: 'company_name',
    align: 'center',
    width: '150px',
  },
  {
    title: '职位类型',
    key: 'job_code',
    align: 'center',
    width: '120px',
    render(row) {
      return getJobName(row.job_code)
    },
  },
  {
    title: '申请时间',
    key: 'post_time',
    align: 'center',
    width: '100px',
    sorter: (a, b) => a.apply_time.localeCompare(b.apply_time),
  },
  {
    title: '审核状态',
    key: 'audit_state',
    align: 'center',
    width: '90px',
    render(row) {
      const obj = audit_state[row.state]
      return h(
        NTag,
        {
          style: {
            marginRight: '6px',
          },
          type: obj.type,
          bordered: false,
        },
        {
          default: () => obj.label,
        }
      )
    },
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
    width: '200px',
    render(row) {
      return [
        h(
          NButton,
          {
            type: 'info',
            secondary: true,
            class: 'mr-5',
            onClick: () => handleDetail(row),
          },
          { default: () => '详情' }
        ),
        h(
          NButton,
          {
            type: 'success',
            secondary: true,
            class: 'mr-5',
            disabled: row.state!==0,
            onClick: () => handleAgree(row),
          },
          { default: () => '通过' }
        ),
        h(
          NButton,
          {
            type: 'error',
            secondary: true,
            disabled: row.state!==0,
            onClick: () => handleDisagree(row),
          },
          { default: () => '不通过' }
        ),
      ]
    },
  },
])

//审核通过的招聘职位表格列数据
const auditedColumns = ref([
  {
    title: 'id',
    key: 'job_id',
    align: 'center',
    width: '100px'
  },
  {
    title: '申请人员id',
    key: 'recruiter_id',
    align: 'center',
    width: '100px',
  },
  {
    title: '申请公司id',
    key: 'company_id',
    align: 'center',
    width: '100px',
  },
  {
    title: '申请公司名称',
    key: 'company_name',
    align: 'center',
    width: '150px',
  },
  {
    title: '职位类型',
    key: 'job_code',
    align: 'center',
    width: '120px',
    render(row) {
      return getJobName(row.job_code)
    },
  },
  {
    title: '申请时间',
    key: 'post_time',
    align: 'center',
    width: '100px',
    sorter: (a, b) => a.apply_time.localeCompare(b.apply_time),
  },
  {
    title: '审核状态',
    key: 'audit_state',
    align: 'center',
    width: '90px',
    render(row) {
      const obj = audit_state[row.state]
      return h(
        NTag,
        {
          style: {
            marginRight: '6px',
          },
          type: obj.type,
          bordered: false,
        },
        {
          default: () => obj.label,
        }
      )
    },
  },
  {
    title: '操作',
    key: 'action',
    align: 'center',
    width: '130px',
    render(row) {
      return [
        h(
          NButton,
          {
            type: 'info',
            secondary: true,
            class: 'mr-5',
            onClick: () => handleDetail(row),
          },
          { default: () => '查看详情' }
        ),
        h(
          NButton,
          {
            type: 'error',
            secondary: true,
            disabled: row.state!==1,
            onClick: () => handleDelete(row),
          },
          { default: () => '撤销' }
        ),
      ]
    },
  },
])

const pagination = {
  pageSize: 5
}

//显示详情的职位信息对象
const display = ref({})

//未审核招聘信息数据
const unauditedJobPosting = ref([])

//全部招聘信息数据
const auditedJobPosting = ref([])

let address = computed(() => {
  return getCity(display.value.address_code)
})

let job_name = computed(() => {
  return getJobName(display.value.job_code)
})

let type = computed(() => {
  return typeOps[display.value.type].label
})

let education_requirement = computed(() => {
  return degreeOps[display.value.education_requirement].label
})

let descriptions = computed(() => {
  return display.value.job_description.split(/[\r\n]+/)
})

const audit_state = [
  { type: 'warning', label: '审核中' },
  { type: 'success', label: '已通过' },
  { type: 'error', label: '未通过' },
  { type: 'error', label: '已撤销' },
]

const degreeOps = [
  { value: 0, label: '中专/中技' },
  { value: 1, label: '大专' },
  { value: 2, label: '本科' },
  { value: 3, label: '硕士' },
  { value: 4, label: 'MBA/EMBA' },
  { value: 5, label: '博士' },
  { value: 6, label: '学历不限' },
]

const typeOps = [
  { value: 0, label: '实习' },
  { value: 1, label: '应届' },
  { value: 2, label: '全职' },
  { value: 3, label: '兼职' },
]

const [modalRef] = useModal()

//打开查看详情对话框
function handleDetail(row) {
  const value = display.value
  value.job_id = row.job_id
  value.title = row.title
  value.company_name = row.company_name
  value.job_code = row.job_code
  value.type = row.type
  value.address_code = row.address_code
  value.salary_min = row.salary_min.toString()
  value.salary_max = row.salary_max.toString()
  value.education_requirement = row.education_requirement
  value.job_description = row.job_description
  modalRef.value.open()
}

function handleAgree(row) {
  $dialog.error({
    title: '确定通过',
    content: '是否通过该招聘职位信息？',
    positiveText: '确认',
    negativeText: '取消',
    async onPositiveClick() {
      await adminApi.agreeJobPosting(row.job_id)
      $message.success('通过成功')
      row.state = 1
    },
  })
}

function handleDisagree(row) {
  $dialog.error({
    title: '确定否决',
    content: '是否不通过该招聘职位信息？',
    positiveText: '不通过',
    negativeText: '取消',
    async onPositiveClick() {
      await adminApi.disagreeJobPosting(row.job_id)
      $message.success('不通过成功')
      row.state = 2
    },
  })
}

function handleDelete(row) {
  $dialog.error({
    title: '确定撤销',
    content: '是否撤销该招聘职位信息？',
    positiveText: '撤销',
    negativeText: '取消',
    async onPositiveClick() {
      await adminApi.deleteJobPosting(row.job_id)
      $message.success('撤销成功')
      row.state = 3
    },
  })
}

onMounted(async () => {
  let res = await adminApi.getUnauditedJobPosting()
  unauditedJobPosting.value = res.data
  res = await adminApi.getAuditedJobPosting()
  auditedJobPosting.value = res.data
})
</script>
